<template>
  <view class="nav-menu">
    <view class="nav-item" v-for="(item, index) in navList" :key="index" @tap="handleNavClick(item)">
      <image :src="item.icon" mode="widthFix"></image>
      <text>{{ item.name }}</text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  navList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['navClick'])

const handleNavClick = (item) => {
  emit('navClick', item)
}
</script>

<style scoped>
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  background: #fff;
}

.nav-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.nav-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.nav-item text {
  font-size: 24rpx;
  color: #333;
}
</style> 